<template>
    <div id="header-content">
        <el-form id="header-query" label-width="100px" style="width: 62%" ref="searchParam" :model="searchParam">
            <el-form-item label="估值日期" prop="navDate">
                <el-date-picker
                    v-model="searchParam.navDate"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyyMMdd"
                    placeholder="选择日期"
                    size="mini"
                    style="width: 100%"
                    @change="handleDateChange"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="主产品代码" prop="portCode" label-width="145px">
                <!-- <el-input v-model="searchParam.portCode" size="mini"> </el-input> -->
                <el-select v-model="searchParam.portCode" size="mini" filterable clearable multiple collapse-tags>
                    <el-option
                        v-for="item in fundIds"
                        :key="item.dictCode"
                        :label="item.dictCode + ' ' + item.dictKeyName"
                        :value="item.dictCode"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="margin-top: 6px">
            <!-- <span id="show-content" @click="openBtn">
                更多查询条件
                <i :class="{ 'el-icon-arrow-down': !isOpen, 'el-icon-arrow-up': isOpen }"></i>
            </span> -->
            <el-button type="primary" size="mini" @click="handleButton('refresh')">刷新</el-button>
            <el-button type="primary" size="mini" @click="handleButton('reset')">重置</el-button>
            <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
            <el-button type="primary" size="mini" @click="handleButton('loadout')">导出</el-button>
            <el-button type="primary" size="mini" @click="handleButton('doLayout')"> 布局设置</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import XEUtils from 'xe-utils';

@Component({ name: 'ValuationSelQueryCondition', components: {} })
export default class ValuationSelQueryCondition extends Vue {
    @Prop()
    showSearchParams: any;

    searchParam: any = {
        navDate: [],
        //  XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
        portCode: [],
        sort: 'nav_date ASC',
    };

    @Watch('searchParam', { deep: true })
    handleSearchParam(): void {
        this.$emit('comReturn', {
            isOpen: this.isOpen,
            searchParam: this.searchParam,
        });
    }
    isOpen: boolean = false;

    selectLoading: boolean = false;

    fundIds: any[] = []; // 产品序号下拉值

    @Prop({ default: false }) isFirst: boolean;

    @Prop({ default: false }) immediate: boolean;

    @Watch('isFirst')
    handleIsFirst() {
        this.isFirst && this.getDict();
    }

    mounted() {
        if (this.immediate) {
            this.getDict();
        }
    }

    // 字典值
    async getDict() {
        // 产品序号
        await new Promise((resolve, reject) => {
            this.$axios
                .post('/reportDict/fundId')
                .then((res: any) => {
                    this.fundIds = res;
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    openBtn() {
        this.isOpen = !this.isOpen;
        this.$emit('comReturn', {
            isOpen: this.isOpen,
            searchParam: this.searchParam,
        });
    }

    async handleButton(type: string) {
        if (type == 'reset') {
            (this.$refs['searchParam'] as any).resetFields();
        } else {
            this.$emit('handleButton', type);
        }
    }

    // 日期改动事件
    private handleDateChange(val): void {
        if (!val) {
            this.searchParam.navDate = [];
        }
    }
}
</script>
<style lang="scss" scoped>
#header-content {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 15px 0;

    #header-query {
        display: grid;
        // grid-template-columns: repeat(3, 1fr);
        grid-template-columns: 1fr 1fr;
        /deep/ .el-form-item {
            margin-bottom: 4px;
            .el-form-item__label {
                color: black;
                padding-right: 2px;
            }
        }
    }

    #show-content {
        cursor: pointer;
    }
}

/deep/ .el-input--mini .el-input__icon {
    line-height: 42px !important;
}

/deep/ .el-select__tags {
    flex-wrap: nowrap;

    .el-tag.el-tag--info {
        display: flex;
        align-items: center;

        .el-select__tags-text {
            display: block;
            font-size: 12px;
            max-width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
